<template>

  <el-form label-width="80px" inline>
    <el-form-item label="用户">
      <user-selector v-model:user-id="searchVO.userId"></user-selector>
    </el-form-item>
    <el-form-item label="订单号">
      <el-input placeholder="请输入订单号" style="width: 150px" v-model="searchVO.id"></el-input>
    </el-form-item>
    <el-form-item label="类型">
      <el-select v-model="searchVO.type" placeholder="请选择类型">
        <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="状态">
      <el-select v-model="searchVO.status" placeholder="请选择状态">
        <el-option
            v-for="(key,index) in Object.keys(statusMap)"
            :key="index"
            :label="statusMap[key]"
            :value="key"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="创建时间">
      <el-date-picker
          v-model="timeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
      />
    </el-form-item>
    <el-form-item>
      <el-button
          type="primary"
          @click="handleQuery"
      >
        <el-icon style="margin-right: 5px">
          <Search/>
        </el-icon>
        搜索
      </el-button>
      <el-button
          @click="resetQuery"
      >
        <el-icon style="margin-right: 5px">
          <Refresh/>
        </el-icon>
        重置
      </el-button>
    </el-form-item>
  </el-form>
  <ship-order v-model:dialog-visible="updateDialogShow" @submit="loadData" :id="updateRowId"></ship-order>

  <el-table :data="pageInfo.list" style="width: 100%">
    <el-table-column type="expand">
      <template #default="{row}">
        <el-row class="my-row">
          <el-col :span="18">
            <el-descriptions
                title="发件人地址"
                :column="3"
                border
            >
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon style="margin-right: 6px">
                      <user/>
                    </el-icon>
                    名字
                  </div>
                </template>
                {{ row.fromAddress.name }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon style="margin-right: 6px">
                      <iphone/>
                    </el-icon>
                    手机号
                  </div>
                </template>
                {{ row.fromAddress.phoneNumber }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon style="margin-right: 6px">
                      <office-building/>
                    </el-icon>
                    地址
                  </div>
                </template>
                {{ row.fromAddress.address }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon style="margin-right: 6px">
                      <office-building/>
                    </el-icon>
                    邮编
                  </div>
                </template>
                {{ row.fromAddress.postcode }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
        <el-row class="my-row">
          <el-col :span="18">
            <el-descriptions
                title="收件人地址"
                :column="3"
                border
            >
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon style="margin-right: 6px">
                      <user/>
                    </el-icon>
                    名字
                  </div>
                </template>
                {{ row.address.name }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon style="margin-right: 6px">
                      <iphone/>
                    </el-icon>
                    手机号
                  </div>
                </template>
                {{ row.address.phoneNumber }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon style="margin-right: 6px">
                      <office-building/>
                    </el-icon>
                    地址
                  </div>
                </template>
                {{ row.address.address }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon style="margin-right: 6px">
                      <office-building/>
                    </el-icon>
                    邮编
                  </div>
                </template>
                {{ row.address.postcode }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
        <el-divider>信件部分</el-divider>
        <div v-if="row.type===typeList[0].value" class="my-row">
          <el-row class="row-bg">
            <el-col :span="2">照片价格:</el-col>
            <el-col :span="2">
              {{ row.postPictureOrder.picturePrice }}
            </el-col>
            <el-col :span="2">照片:</el-col>
            <el-col :span="12" v-if="row.postPictureOrder.pictureUrls">
              <el-image style="width: 100px;height: 100px" :src="image" :preview-src-list="[image]"
                        fit="cover"
                        v-for="(image,index) in row.postPictureOrder.pictureUrls.split(';')"
                        :key="index"></el-image>
            </el-col>
          </el-row>
          <el-divider border-style="dashed"></el-divider>
          <el-row class="row-bg" style="margin-top: 10px">
            <el-col :span="2">手写照片价格:</el-col>
            <el-col :span="2">{{ row.postPictureOrder.writePicturePrice }}</el-col>
            <el-col :span="2"> 手写照片:</el-col>
            <el-col :span="12" v-if="row.postPictureOrder.writePictureUrls">
              <el-image style="width: 100px;height: 100px" :src="image"
                        :preview-src-list="[image]"
                        fit="cover"
                        v-for="(image,index) in row.postPictureOrder.writePictureUrls.split(';')"
                        :key="index"></el-image>
            </el-col>
          </el-row>
          <el-divider border-style="dashed"></el-divider>
          <el-row class="row-bg">
            <el-col :span="2">字数价格:</el-col>
            <el-col :span="2">{{ row.postPictureOrder.wordPrice }}</el-col>
            <el-col :span="2">内容:</el-col>
            <el-col :span="12">{{ row.postPictureOrder.wordContent }}</el-col>
          </el-row>
          <el-divider border-style="dashed"></el-divider>
          <el-row class="row-bg">
            <el-col :span="2">模板价格:</el-col>
            <el-col :span="2">{{ row.postPictureOrder.templatePrice }}</el-col>
            <el-col :span="2">模板:</el-col>
            <el-col :span="2">{{ row.postPictureOrder.template.title }}</el-col>
            <el-col :span="2">模板封面:</el-col>
            <el-col :span="8">
              <el-image fit="cover" :src="row.postPictureOrder.template.picture" style="width: 100px;height: 100px"
                        :preview-src-list="[row.postPictureOrder.template.picture]"></el-image>
            </el-col>
          </el-row>
        </div>
        <el-divider>明信片部分</el-divider>
        <div v-if="row.type===typeList[1].value" class="my-row">
          <el-row class="row-bg">
            <el-col :span="2">明信片封面:</el-col>
            <el-col :span="2">
              <el-image fit="cover" :src="row.postcardOrder.cover" style="width: 100px;height: 100px"
                        :preview-src-list="[row.postcardOrder.cover]"></el-image>
            </el-col>
            <el-col :span="2">明信片内容:</el-col>
            <el-col :span="12">
              <p>{{ row.postcardOrder.content }}</p>
            </el-col>
          </el-row>
        </div>
        <el-divider>商品部分</el-divider>
        <div v-if="row.orderProducts" class="my-row">
          <el-row class="row-bg" v-for="(product,index) in row.orderProducts" :key="index">
            <el-col :span="2">商品名称:</el-col>
            <el-col :span="2">{{ product.product.name }}</el-col>
            <el-col :span="2">商品价格:</el-col>
            <el-col :span="2">{{ product.product.price }}</el-col>
            <el-col :span="2">商品数量:</el-col>
            <el-col :span="2"> {{ product.count }}</el-col>
            <el-col :span="4">
              <el-row>
                <el-col :span="8">商品封面:</el-col>
                <el-col :span="14">
                  <el-image :preview-src-list="[product.product.cover]" fit="cover" style="width: 100px;height: 100px"
                            :src="product.product.cover"></el-image>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="id" label="编号" width="180"/>
    <el-table-column prop="userId" label="用户id" width="180"/>
    <el-table-column prop="finalPrice" label="总价" width="100"/>
    <el-table-column label="快递" width="180">
      <template #default="{row}">
        {{ row.delivery.name + " ￥" + row.delivery.price }}
      </template>
    </el-table-column>
    <el-table-column label="订单状态" width="100">
      <template #default="{row}">
        {{ statusMap[row.orderStatus] }}
      </template>
    </el-table-column>
    <el-table-column prop="type" label="订单类型" width="100"></el-table-column>
    <el-table-column prop="logisticsNo" label="物流单号" width="100"/>
    <el-table-column prop="paymentTime" label="支付日期"/>
    <el-table-column prop="createTime" label="创建日期"/>
    <el-table-column prop="updateTime" label="更新日期"/>
    <el-table-column fixed="right" label="操作" width="180">
      <template #default="{row}">
        <el-button type="warning" size="small" @click="handleEdit(row)" v-if="row.orderStatus==1">
          <el-icon style="margin-right: 8px">
            <Van/>
          </el-icon>
          发货
        </el-button>
        <el-button type="warning" size="small" @click="handleEdit(row)" v-if="row.orderStatus==2">
          <el-icon style="margin-right: 8px">
            <Van/>
          </el-icon>
          修改物流单号
        </el-button>
        <el-button type="danger" size="small" @click="handleDelete(row)" v-if="row.orderStatus==0">
          <el-icon style="margin-right: 8px">
            <Delete/>
          </el-icon>
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      v-model:currentPage="searchVO.pageNum"
      :page-size="searchVO.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="loadData"
      @size-change="handleSizeChange"
      :total="pageInfo.total"
  >
  </el-pagination>

</template>
<script lang="ts">
import {defineComponent} from "vue";
import {Order, PostcardOrder, PostPictureOrder, SearchVO, User} from "@/typings";
import {ElMessage, ElMessageBox} from "element-plus";
import {listUser} from "@/api/system/user";
import {cancelOrder, listOrder, ORDER_TYPE_LETTER, ORDER_TYPE_POSTCARD, ORDER_TYPE_PRODUCT} from "@/api/post/order";
import {filesToUrls} from "@/utils/common";
import moment from "moment";
import ShipOrder from "@/components/post/order/ship-order.vue";
import unit from "@/views/post/unit/unit.vue";
import UserSelector from "@/components/system/user/user-selector.vue";

export default defineComponent({
  components: {UserSelector, ShipOrder},
  data() {
    return {
      pageInfo: {
        list: [],
        pages: 1
      },
      searchVO: {
        keyword: '',
        pageNum: 1,
        pageSize: 10,
        id: undefined
      } as SearchVO,
      typeList: [
        {label: '寄信订单', value: ORDER_TYPE_LETTER},
        {label: '寄明信片订单', value: ORDER_TYPE_POSTCARD},
        {label: '寄商品订单', value: ORDER_TYPE_PRODUCT}
      ],
      statusMap: {
        0: "待支付",
        1: "待寄出",
        2: "已寄出",
        3: '已完成'
      },
      createDialogShow: false,
      updateDialogShow: false,
      updateRowId: '0',
      timeRange: []
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    handleDelete(row: Order) {
      ElMessageBox.confirm("是否确认要删除该记录", 'warning',
          {confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning'})
          .then(() => {
            cancelOrder(row.id).then(res => {
              if (res == true) {
                ElMessage.success({message: '删除成功'});
                this.loadData()
              }
            })
          })
    },
    handleEdit(row: Order) {
      this.updateRowId = row.id
      this.updateDialogShow = true
    },
    loadData() {
      if (this.timeRange.length > 0) {
        this.searchVO.startTime = moment(this.timeRange[0]).format('YYYY-MM-DD HH:mm:ss')
        this.searchVO.endTime = moment(this.timeRange[1]).format('YYYY-MM-DD HH:mm:ss')
      }
      listOrder(this.searchVO).then(res => {
        res.list.forEach((row: Order) => {
          if (row.type == ORDER_TYPE_LETTER) {
            row.postPictureOrder = JSON.parse(row.priceDetail) as PostPictureOrder
            row.postPictureOrder.pictureUrls = filesToUrls(row.postPictureOrder.pictureUrls as string)
            row.postPictureOrder.writePictureUrls = filesToUrls(row.postPictureOrder.writePictureUrls as string)
            row.orderProducts = row.postPictureOrder.orderProducts
          } else if (row.type == ORDER_TYPE_PRODUCT) {
            row.orderProducts = JSON.parse(row.priceDetail)
          } else if (row.type == ORDER_TYPE_POSTCARD) {
            row.postcardOrder = JSON.parse(row.priceDetail) as PostcardOrder
            row.postcardOrder.cover = filesToUrls(row.postcardOrder.cover)
            console.log(row.cover)
          }
        })
        this.pageInfo = res
      })
    },
    handleQuery() {
      this.searchVO.pageNum = 1
      this.loadData()
    },
    handleSizeChange(val: number) {
      this.searchVO.pageSize = val
    },
    resetQuery() {
      this.searchVO = {
        userId: undefined,
        type: undefined,
        startTime: undefined,
        endTime: undefined,
        timeRange: undefined,
        keyword: undefined,
        pageNum: 1,
        pageSize: 10,
        id: undefined
      }
      this.timeRange = []
    },
    handleExport() {

    },
  }
})
</script>
<style lang="scss" scoped>
.my-row {
  margin-top: 20px;
}
</style>